<template>
  <div style="width: 100%;">
    <span
      style="width: 20%; flex: none"
      :title="item?.user?.username"
      class="visitor-content"
    >
      {{ item?.user?.username }}
    </span>

    <span
      style="width: 20%; flex: none"
      :title="getRoom(item?.room).name"
      class="visitor-content"
    >{{ getRoom(item?.room).name }}</span>

    <span
      style="width: 30%; flex: none"
      :title="formatTimeRange(item?.start_time, item?.end_time)"
      class="visitor-content"
    >
      {{ formatTimeRange(item?.start_time, item?.end_time) }}
    </span>

    <span
      style="width: 30%; flex: none"
      :title="item?.reason"
      class="visitor-content"
    >
      {{ item?.reason }}
    </span>
  </div>
</template>
<script>
import { getReserveList } from '@/api/conferenceRoom'
import dayjs from 'dayjs'

export default {
  name: '',
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getReserveList()
  },
  methods: {
    getRoom(room) {
      return JSON.parse(room)
    },

    formatTimeRange(startTime, endTime) {
      const startDate = dayjs(startTime)
      const endDate = dayjs(endTime)

      const year = startDate.format('YYYY')
      const month = startDate.format('MM')
      const day = startDate.format('DD')

      const startHours = startDate.format('HH')
      const startMinutes = startDate.format('mm')
      const startSeconds = startDate.format('ss')

      const endHours = endDate.format('HH')
      const endMinutes = endDate.format('mm')
      const endSeconds = endDate.format('ss')

      return `${year}.${month}.${day}  ${startHours}:${startMinutes}:${startSeconds} - ${endHours}:${endMinutes}:${endSeconds}`
    }
  }
}
</script>
<style lang="scss" scoped>
.swiper-title {
  display: flex;
  flex-wrap: wrap;
  background-color: #051555;
  color: #fff;
  position: relative;
  z-index: 99;
  border-style: solid;
  border-width: 2px;
  border-color: #0f39c9;
}

.visitor-title {
  display: flex;
  flex: 1;
  align-items: center;
  text-align: left;
  box-sizing: border-box;
  font-size: 1.5vw;
  padding: 15px 5px;
  color: #10e0eb;
}

.visitor-content {
  flex: 1;
  text-align: left;
  font-size: 1.4vw;
  padding: 20px 5px;
  word-break: break-word;
  font-weight: 700;
  display: inline-block;
}

</style>
